<template>
	<view class="container">

		<!-- 整个框架 -->
		<view class="out">
			<view class="top">
				<view class="count">共{{dataCount}}条</view>
				<view class="state">状态：</view>
				<view class="select">
					<uni-data-select v-model="statusValue" :localdata="range" @change="changeStatus"></uni-data-select>
				</view>

				<view class="repair">维修方式：</view>
				<view class="repairselect">
					<uni-data-select v-model="repairValue" :localdata="repairrange" @change="changeRepair"></uni-data-select>
				</view>
			</view>

			<view v-if="repairList.length > 0">
				<navigator v-for="item in repairList" :key="item.id" class="textList" :url="'/pages/repairTasks/repairdetail/repairdetail?id='+item.id">
					<view class="textOne">
						<view>维修单号</view>
						<view>{{item.id}}</view>
					</view>
					<view class="textOne">
						<view>维修方式</view>
						<view>{{item.type=="0" ? "到店维修" : "上门取车"}}</view>
					</view>
					<view class="textOne">
						<view>预约日期</view>
						<view>{{item.reservationTime}}</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataCount: 0,
				repairrange: [
					{ value: 3, text: "全部" },
					{ value: 0, text: "到店维修" },
					{ value: 1, text: "上门取车" },
				],
				statusValue: 3,  // Separate value for status dropdown
				repairValue: 3,  // Separate value for repair type dropdown
				repairList: [],
				range: [
					{ value: 3, text: "全部" },
					{ value: 1, text: "进行中" },
					{ value: 2, text: "已完成" }
				],
			}
		},
		onLoad() {
			// Initialize data when the component loads
			this.initData(this.statusValue, this.repairValue);
		},
		methods: {
			// Change event handler for the status dropdown
			changeStatus(e) {
				this.initData(this.statusValue, this.repairValue);
			},
			// Change event handler for the repair type dropdown
			changeRepair(e) {
				this.initData(this.statusValue, this.repairValue);
			},
			// Fetch data based on status and repair type
			initData(status, type) {
				uni.request({
					url: `http://localhost:9206/repairReservation/listByStatusAndType?${status != 3 ? `status=${status}&` : ""}${type != 3 ? `type=${type}` : ""}`,
					method: 'GET',
					header: {
						'authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImI0OWU4NmFkLTZhNTMtNGQyNS1iNzFkLTQ1NjBiOTE2ZTFhNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.PHw5Ez00yg0Vk_Wx4zO3rnSUHe2znWiWOK2IhwFS80dqK02znBtDbe7GfAiuT3YOQSsnBdIi0O7fjprpExMxlg'
					},
					success: (res) => {
						console.log(res)
						console.log(res.data.length)
						this.dataCount=res.data.length
						this.repairList = res.data;
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		background-color: #ffffff;
	}

	.out {

		padding-left: 10rpx;
		padding-right: 20rpx;

	}
.list{
	margin-top: 8px;
}
	.top {
		display: flex;
		height: 90rpx;
		line-height: 100rpx;
		font-weight: 700;
	}

	.count {
		
		padding-right: 40rpx;
	}

	.number {

		height: 60rpx;
		display: flex;
		line-height: 50rpx;

	}

	.numberone {
		padding-left: 40rpx;
		width: 160rpx;

	}

	.numbertwo {
		width: 300rpx;
	}

	.numberthree {
		text-align: center;
		width: 200rpx;
		color: #3f86ff;
	}

	.finish {
		text-align: center;
		width: 200rpx;
		color: #959696;

	}

	.button {
		font-size: 30rpx;
		width: 150rpx;
		color: #ffffff;
		background-color: #557ad6;
		border-radius: 10rpx;
		margin-left: 36rpx;
	}

	.list {

		border-bottom: 4rpx solid #e2e2e2;
	}

	.repair {
		padding-left: 40rpx;
	}
</style>
<style scoped>
	/deep/.uni-select[data-v-6b64008e] {
		margin-top: 6px;
		margin-left: -5px;
		font-size: 18px;
		border: 0;
		box-sizing: border-box;
		border-radius: 4px;
		padding: 0px 10px;
		padding-left: 5px;
		position: relative;
		display: flex;
		-webkit-user-select: none;
		user-select: none;
		flex-direction: row;
		align-items: center;
		border-bottom: 0;
		width: 100%;
		flex: 1;
		height: 35px;
	}

	/deep/.uni-select__input-placeholder[data-v-6b64008e] {
		color: #000;
		font-size: 28rpx;
	}

	/* 箭头颜色 */
	/deep/.uni-icons {
		color: #000 !important;

	}

	/deep/.uni-select__input-text[data-v-6b64008e] {
		font-size: 28rpx;

	}

	/deep/.uni-stat__select[data-v-6b64008e] {
		width: 128rpx;


	}

	/deep/.uni-select__selector[data-v-6b64008e] {
		padding: 0;
	}

	/deep/.uni-select__selector-item[data-v-6b64008e] {
		width: 150rpx;
		cursor: pointer;
		line-height: 35px;
		font-size: 14px;
		text-align: left;
		padding: 0 4rpx;
	}

	/deep/.uni-select__selector[data-v-6b64008e] {
		width: 130rpx;

	}
	//列表样式
	.textList {
		padding: 10rpx 40rpx;
		border-bottom: 1px solid rgba(206, 206, 206, 0.81);
	}
	.textOne view {
		padding: 5rpx 50rpx;
	}
	.textOne {
		display: flex;
	}
	
</style>